<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/font_3775291_60224mmplrn/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .bigbox {
            width: 100%;
            height: 100%;
            /* background-color: aqua; */
            display: flex;
        }

        aside {
            width: 16%;
            height: 100%;
            /* background-color: blue; */
            box-sizing: border-box;
        }

        .right {
            width: 84%;
            height: 100%;
            background-color: blanchedalmond;
            box-sizing: border-box;
        }

        .lefttop {
            height: 15%;
            background-color: black;
            box-sizing: border-box;
        }

        .leftmid {
            height: 12%;
        }

        .lefttop div {
            padding-left: 40px;
            /* background-color: aqua; */
            height: 50%;
            line-height: 60px;
            color: rgba(240, 221, 221, 0.803);
        }

        .leftmid div {
            padding-left: 40px;
            background-color: black;
            height: 50%;
            line-height: 44px;
            color: rgba(240, 221, 221, 0.803);
            font-size: 12px;
        }

        .leftmid div select {
            margin-left: 70px;
            background-color: black;
            color: rgba(240, 221, 221, 0.803);
            border: none;
        }

        .leftmid div font {
            margin-left: 100px;
        }

        .leftmid .mail font {
            margin-left: 90px;
        }

        .leftmid .Dash {
            background-color: #157efb;
            box-sizing: border-box;
        }

        .leftmid .Dash select {
            background-color: #157efb;
        }

        .leftmid .Dash3 {
            background-color: #ececec;
            color: black;
        }
        
        .right .rightheader {
            height: 7%;
            width: 100%;
            background-color: white;
            display: flex;
            justify-content: space-between;
        }

        .right .rightheader .inleft {
            height: 100%;
            width: 40%;
            display: flex;
            justify-content: space-around;
            /* background-color: bisque; */
            align-items: center;
        }

        .right .rightheader .inleft input {
            height: 20px;
            padding-left: 10px;
            background-color: #f3f4f6;
            border: none;
        }

        .right .rightheader .inright {
            width: 100px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-right: 5px;
        }

        .right .secondheader {
            height: 8%;
            background-color: #f5f6fa;
            display: flex;
            justify-content: space-between;
        }

        .right .secondheader span {
            font-size: 20px;
            line-height: 60px;
            padding-left: 25px;
        }

        .right .secondheader p {
            font-size: 14px;
            line-height: 60px;
            padding-right: 15px;
            color: #157efb;
        }

        .main {
            height: 100%;
            width: 100%;
            background-color: #f3f4f6;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;

        }

        .mainbox {
            height: 50%;
            width: 49%;
            background-color: white;
            margin-top: 10px;
        }

        .biaoge table {
            margin: 20px 15px;
            width: 100%;
            line-height: 30px;
            margin-left: 40px;
        }
        .biaoge table thead tr th{
            text-align: left;
        }
        .biaoge  header{
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:  0 42px;
            /* background-color: #157efb; */
        }
        .biaoge  header p{
            font-size: 18px;
        }
        .shuju header{
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:  0 15px;
            /* background-color: #157efb; */
        }
        .shuju main{
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:  0 15px;
            /* background-color: aqua; */
        }
        .shuju main{
            border-bottom: 3px solid  #f3f4f6;
        }
        .shuju main p{
            font-size: 12px;
        }
        .shuju main span{
            font-size: 18px;
        }
        .shuju main p:nth-child(1){
            text-align: right;
            font-weight: 700;
        }

    </style>
</head>

<body>
    <div class="bigbox">
        <aside>
            <div class="lefttop">
                <div>
                    <span class="iconfont icon-ums-admin"></span>
                    <span>AdminLTE 3</span>
                </div>
                <div>
                    <span class="iconfont icon-ums-admin"></span>
                    <span>Alexander Pierce</span>
                </div>
            </div>
            <div class="leftmid">
                <div class="Dash">
                    <span class="iconfont icon-dasuolvetuliebiao"></span>
                    <span>Dashboard</span>
                    <select>
                        <option></option>
                    </select>
                </div>
                <div>
                    <span class="iconfont icon-weixuanzhongyuanquan"></span>
                    <span>Dashboard v1</span>
                </div>
                <div>
                    <span class="iconfont icon-weixuanzhongyuanquan"></span>
                    <span>Dashboard v2</span>
                </div>
                <div class="Dash3">
                    <span class="iconfont icon-weixuanzhongyuanquan"></span>
                    <span>Dashboard v3</span>
                </div>
                <div>
                    <span class="iconfont icon-dasuolvetuliebiao"></span>
                    <span>Wdgets</span>
                </div>
                <div>
                    <span class="iconfont icon-pie"></span>
                    <span>Charts</span>
                    <font>&lt;</font>
                </div>
                <div>
                    <span class="iconfont icon-tree"></span>
                    <span>UlElements</span>
                </div>
                <div>
                    <span class="iconfont icon-widgets-f"></span>
                    <span>Forms</span>
                    <font>&lt;</font>
                </div>
                <div>
                    <span class="iconfont icon-wpforms"></span>
                    <span>Tables</span>
                    <font>&lt;</font>
                </div>

                <div>
                    <span>EXAMPLES</span>
                </div>
                <div>
                    <span class="iconfont icon-wpforms"></span>
                    <span>Calender</span>
                </div>
                <div class="mail">
                    <span class="iconfont icon-icon_xinjian"></span>
                    <span>Mailbox</span>
                    <font>&lt;</font>
                </div>
                <div>
                    <span class="iconfont icon-wpforms"></span>
                    <span>pages</span>
                    <font>&lt;</font>
                </div>
                <div>
                    <span class="iconfont icon-table-solid"></span>
                    <span>Extras</span>
                    <font>&lt;</font>
                </div>

        </aside>
        <div class="right">
            <div class="rightheader">
                <div class="inleft">
                    <span class="iconfont icon-liebiao"></span>
                    <p>Home</p>
                    <p>Contact</p>
                    <input type="text" placeholder="Search">
                </div>
                <div class="inright">
                    <span class="iconfont icon-icon_xinjian"></span>
                    <span class="iconfont icon-liebiao"></span>
                    <span class="iconfont icon-ums-admin"></span>
                </div>
            </div>
            <div class="secondheader">
                <span>Dashboard v3</span>
                <p>Home/Dashboard v3</p>
            </div>
            <div class="main">
                <div class="mainbox zhexian"></div>
                <div class="mainbox zhuzhuang"></div>
                <div class="mainbox biaoge">
                    <header>
                        <p>Products</p>
                        <div>
                            <span class="iconfont icon-ums-admin"></span>
                            <span class="iconfont icon-liebiao"></span>
                        </div>
                    </header>
                    <table>
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Price</th>
                                <th>Sales</th>
                                <th>Mores</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr>
                                <td>${item.name}</td>
                                <td>￥${item.price}</td>
                                <td>${item.status ? true : false}</td>
                                <td>${item.more?"yes":"no"}</td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
                <div class="mainbox shuju">
                    <header>
                        <p>Online Store Overview</p>
                        <div>
                            <span class="iconfont icon-ums-admin"></span>
                            <span class="iconfont icon-liebiao"></span>
                        </div>
                    </header>
                    <main>
                        <span class="iconfont icon-yuanquan"></span>
                        <div class="data">
                            <p>↑12%</p>
                            <p>CONVERSION RATE</p>
                        </div>
                    </main>
                    <main>
                        <span class="iconfont icon-tree"></span>
                        <div class="data">
                            <p>-0.8%</p>
                            <p>SALES RATE</p>
                        </div>
                    </main>

                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./mockdata.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script>
    var example = document.querySelector('.zhuzhuang')
    var e = echarts.init(example)
    e.setOption(
        {
            //title为图表的标题
            title: {
                text: '近五日头发掉落状态',
                left: 'center',
            },
            //xy轴设置
            xAxis: {
                data: ['第一天', '第二天', '第三天', '第四天', '第五天']
            },
            yAxis: {
                // data: ['四五根', '一抓一把', '一抓两把'，'不抓两把']
                splitLine: {
                    show: false
                }
            },
            legend: { //图例
                top: 25,
                // right:10,
            },
            //数据系列，添加数据
            series: [
                {
                    name: '死去的头发',
                    //柱子的宽度
                    barWidth: 30,
                    //显示背景色
                    showBackground: true,
                    backgroundStyle: {
                        //背景圆角
                        borderRadius: [15]
                    },
                    itemStyle: {
                        //边框圆角 
                        borderRadius: [12, 12, 0, 0],//边框圆角 
                    },
                    //bar:柱状 line：线状 pie：线状
                    type: 'bar',
                    data: [30, 20, 18, 26, 10],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                        { offset: 0, color: '#93bff6' },
                        { offset: 0.5, color: '#108df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                    

                }
            ]
        }
    )

    var example1 = document.querySelector('.zhexian')
    var e1 = echarts.init(example1);
    e1.setOption({
        title: {
            text: '近五日体重状况',
            left: 'center',
        },
        legend: { //图例
            top: 25,
            // right:10,
        },
        xAxis: { //x轴设置
            data: ['第1天', '第2天', '第3天', '第4天', '第5天']
        },
        yAxis: { //y轴设置
            splitLine: {
                show: false
            }
        },
        series: [ //数据系列
            {
                name: '幻想体重',
                barWidth: 20, //柱子的宽度
                showBackground: true,//显示背景色
                backgroundStyle: {
                    //color: '',
                    borderRadius: 20, //背景圆角
                },
                itemStyle: {
                    //borderRadius:[20,0,20,0],//边框圆角 
                    borderRadius: [20],//边框圆角 
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //颜色(渐变色)
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                ])
                ,
                type: 'line',//'line' , 'bar' , 'pie'
                data: [62, 61, 60, 58, 60]
            },
            {
                name: '平均体重',
                type: 'line',//'line' , 'bar' , 'pie'
                data: [60, 70, 59, 60, 65],
                symbolSize: 15, //圆点大小
                symbol: 'circle',//圆点形状
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'pink', //折线颜色
                        borderWidth: 2, //圆点的边框宽度
                        borderColor: 'white', //圆点的边框颜色
                        lineStyle: { width: 2 }, //折现的宽度
                        shadowBlur: 5,
                        shadowColor: '#188df0'

                    }
                }

            }

        ]
    })
     

    render(data.list)
    //进行渲染
    function render(data) {
        var str = data.map((item) => {
            return `
            <tr>
                <td>${item.name}</td>
                <td>￥${item.price}</td>
                <td>${item.status ? true : false}</td>
                <td>${item.more?"yes":"no"}</td>
             </tr>
            `
        }).join('')
        document.querySelector('tbody').innerHTML=str
    }


</script>